<template>
  <dt-modal-edit
    ref="edit"
    :previewFlag="true"
    title="霸屏神器模板"
    :label-width="130"
    :width="500"
    @ok="onOk"
    okText="发布"
    @onPreview="onPreview"
    @cancelData="cancelData"></dt-modal-edit>
</template>

<script>
  import createBgOpt from '../opt/createBg.js'
  import bgMapMgr from '@/biz/bgMap/bgMap'

  export default {
    components: {},
    data() {
      return {
        info: {
          templateName: '',
          templateType: '',
          accessoryBOList1: [],
          accessoryBOList2: [],
          accessoryBOList3: [],
          titleFontColor: '',
          iconColor: '',
          middleBackColor: '',
          headTailFontColor: '',
          titleBackColor: ''
        },

        eidtFlag: false,
        bgId: '',
        goSaveFlag: false,
        detailsInfo: ''
      }
    },
    mounted() {},
    watch: {
      '$store.state.screenImg': {
        handler(newValue, oldValue) {
          this.goSaveFlag = true
        }
      }
    },
    methods: {
      create(val, res) {
        if (res) {
          this.detailsInfo = res
          this.info.templateName = res.templateName
          this.info.templateType = res.templateType

          this.info.accessoryBOList1 = [
            {
              accessoryName: '',
              accessoryUrl: res.headPicUrl,
              name: '',
              url: res.headPicUrl
            }
          ]
          this.info.accessoryBOList2 = [
            {
              accessoryName: '',
              accessoryUrl: res.tailPicUrl,
              name: '',
              url: res.tailPicUrl
            }
          ]
          this.info.accessoryBOList3 = [
            {
              accessoryName: '',
              accessoryUrl: res.thumbnailPicUrl,
              name: '',
              url: res.thumbnailPicUrl
            }
          ]
          this.info.titleFontColor = res.titleFontColor
          this.info.iconColor = res.iconColor
          this.info.titleBackColor = res.titleBackColor
          this.info.middleBackColor = res.middleBackColor
          this.info.headTailFontColor = res.headTailFontColor
        }
        this.eidtFlag = val
        this.$refs.edit.show(createBgOpt.options(this), this.info)
      },

      hide() {
        this.$refs.edit.hide()
      },
      cancelData() {
        this.info = {
          templateName: '',
          templateType: '',
          accessoryBOList1: [],
          accessoryBOList2: [],
          accessoryBOList3: [],
          titleFontColor: '',
          iconColor: '',
          middleBackColor: '',
          titleBackColor: '',
          headTailFontColor: '',
          tuImg: ''
        }
      },
      onOk() {
        this.onPreview('', true)
        let timer = null
        timer = setInterval(() => {
          if (this.goSaveFlag) {
            let params = {
              headPicUrl: this.info.accessoryBOList1[0].url,
              headTailFontColor: this.info.headTailFontColor,
              middleBackColor: this.info.middleBackColor,
              tailPicUrl: this.info.accessoryBOList2[0].url,
              thumbnailPicUrl: this.info.accessoryBOList3[0].url,
              templateName: this.info.templateName,
              templateType: this.info.templateType,
              titleFontColor: this.info.titleFontColor,
              iconColor: this.info.iconColor,
              titleBackColor: this.info.titleBackColor,
              previewUrl: this.$store.state.screenImg
            }
            if (this.eidtFlag) {
              params.id = this.detailsInfo.id
              bgMapMgr.updateShortArticleTemplate(params).then((res) => {
                this.$emit('success')
                this.goSaveFlag = false
              })
            } else {
              bgMapMgr.templateSave(params).then((res) => {
                console.log(res, '新建成功')
                this.$emit('success')
                this.goSaveFlag = false
              })
            }
            clearInterval(timer)
          }
        }, 100) // 定时器时间间隔，这里设置为 1 秒（1000 毫秒）
      },
      onPreview(val, flag) {
        let info = this.$tool.deepClone(this.info)
        this.$store.dispatch('screenInfo', info)
        this.$emit('onPreview', flag)
      }
    }
  }
</script>

<style>
  .createBgTips {
    color: #999;
    position: absolute;
    top: 190px;
    right: 16px;
  }
</style>
